<template>
  <div>
    <div class="top_box">
      <img src="../../../public/top.png" alt="" width="100%" class="top_img" />
      <div class="top_text">{{ letfTime }}</div>
    
      <div class="top_text1" style="display: flex;align-items: center;">

      {{ rightTime }}
      <div style="width: 30px;"></div>
      <img src="../../../public/show.png" alt="" width="30" @click="show=false" v-if="show">
        <img src="../../../public/yin.png" alt="" width="30" @click="show=true" v-if="!show">
    
    </div>
    </div>
    <div>
      <div class="gai_box" v-if="show">
        <div class="gai_top">数据概览</div>
        <div
          class="gai_flx"
          style="display: flex; align-items: center; justify-content: center"
        >
          <div class="shuju_box">
            <img
              src="../../../public/boradone.png"
              alt=""
              style="margin: 0 auto"
              width="69"
              height="53"
            />
            <div class="shuju_title">订单总数(个)</div>
            <div class="shuju_number" style="color: #fff">
              {{ mood.orderNum }}
            </div>
          </div>
          <div class="shuju_box">
            <img
              src="../../../public/boradtwo.png"
              alt=""
              style="margin: 0 auto"
              width="69"
              height="53"
            />
            <div class="shuju_title">车辆总数(辆)</div>
            <div class="shuju_number" style="color: #fff">
              {{ mood.carNum }}
            </div>
          </div>
          <div class="shuju_box" style="border: none">
            <img
              src="../../../public/boradthree.png"
              alt=""
              style="margin: 0 auto"
              width="69"
              height="53"
            />
            <div class="shuju_title">司机总数(人)</div>
            <div class="shuju_number" style="color: #fff">
              {{ mood.driverNum }}
            </div>
          </div>
        </div>
      </div>

      <div class="dire_box" v-if="show">
        <div class="gai_top">司机统计</div>
        <div class="gai_flx siji">
          <div class="car_box">
            <div class="car_line"></div>
            <div class="car_title">
              <div style="margin-bottom: 8px">空闲司机</div>
              <div class="car_number">
                {{ mood.driverNum - mood.notDriverNum }}
                <span class="car_ren">人</span>
              </div>
            </div>
          </div>
          <div class="car_box">
            <div class="car_line"></div>
            <div class="car_title">
              <div style="margin-bottom: 8px">平均准点率</div>
              <div class="car_number">{{ mood.punctuality }}%</div>
            </div>
          </div>
          <div class="car_box">
            <div class="car_line"></div>
            <div class="car_title">
              <div style="margin-bottom: 8px">运输中司机</div>
              <div class="car_number">
                {{ mood.notDriverNum }} <span class="car_ren">人</span>
              </div>
            </div>
          </div>
          <div class="car_box">
            <div class="car_line"></div>
            <div class="car_title">
              <div style="margin-bottom: 8px">每日平均完单量</div>
              <div class="car_number">
                {{ mood.averageOrder }} <span class="car_ren">人</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="six_box" v-show="show">
        <div class="gai_top">近6个月运单数量</div>
        <div class="gai_flx1">
          <div id="chart" style="width: 100%; height: 100%"></div>
        </div>
      </div>

      <div class="gai_box1" v-if="show">
        <div class="gai_top">本月流水</div>
        <div class="gai_flx">
          <div class="benyue">
            <div class="benyue_img">
              <div>
                <div class="benyue_text">
                  {{
                    (mood.cflowingWater * 1 + mood.zflowingWater * 1).toFixed(2)
                  }}
                </div>
                <div class="liushui">总流水(万)</div>
              </div>
            </div>
            <div>
              <div class="benyue_textzero">
                <div class="benyue_textone">
                  <div class="benyue_texttwo"></div>
                  <div class="benyue_texthree">承运流水(万)</div>
                </div>
                <div class="benyue_textfive">
                  {{ mood.cflowingWater }} <span>万</span>
                </div>
              </div>
              <div class="benyue_textzero">
                <div class="benyue_textone">
                  <div class="benyue_texttwo"></div>
                  <div class="benyue_texthree">自营流水(万)</div>
                </div>
                <div class="benyue_textfive">
                  {{ mood.zflowingWater }}<span>万</span>
                </div>
              </div>
              <div class="benyue_textzero">
                <div class="benyue_textone">
                  <div class="benyue_texttwo"></div>
                  <div class="benyue_texthree">人均流水(万)</div>
                </div>
                <div class="benyue_textfive">
                  {{ mood.dflowingWater }}<span>万</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dire_box1" v-if="show">
        <div class="gai_top">订单监测</div>
        <div class="orderJianBox">
          <div class="gai_flx orderJian">
            <el-table
              :data="Monitor"
              class="gai_flx orderJian"
              stripe
              height="172"
              :header-cell-style="{ background: '#163447' }"
            >
              <el-table-column prop="monitorTime" label="时间" width="180">
              </el-table-column>
              <el-table-column prop="numberplate" label="车辆信息" width="180">
              </el-table-column>
              <el-table-column prop="total_amount" label="订单金额">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <div class="six_box1" v-if="show">
        <div class="gai_top">近6个月订单金额(万)</div>
        <div class="gai_flx1">
          <div id="chartTwo" style="width: 100%; height: 100%"></div>
        </div>
      </div>

      <div class="alarm_box" v-if="show">
        <div class="alarm_boxtopflx">
          <div class="alarm_top">
            <img src="../../../public/jin1.png" alt="" />
            <div>超速报警</div>
          </div>
          <div class="alarm_top">
            <img src="../../../public/jin2.png" alt="" />
            <div>疲劳驾驶</div>
          </div>
          <div class="alarm_top">
            <img src="../../../public/jin3.png" alt="" />
            <div>全部重点报警</div>
          </div>
        </div>
        <div class="alarm_boxtopflx">
          <div>
            <!--  超速报警 -->
            <div class="alarm_top1">
              <div>0</div>
              <div>0</div>
              <div>0</div>
              <span>昨日</span>
            </div>
            <div class="alarm_top1">
              <div>0</div>
              <div>0</div>
              <div>0</div>
              <span>前日</span>
            </div>
          </div>

          <div>
            <!--  疲劳驾驶 -->
            <div class="alarm_top1">
              <div>0</div>
              <div>0</div>
              <div>0</div>
              <span>昨日</span>
            </div>
            <div class="alarm_top1">
              <div>0</div>
              <div>0</div>
              <div>0</div>
              <span>前日</span>
            </div>
          </div>

          <div>
            <!--  全部重点报警 -->
            <div class="alarm_top1">
              <div>0</div>
              <div>0</div>
              <div>0</div>
              <span>昨日</span>
            </div>
            <div class="alarm_top1">
              <div>0</div>
              <div>0</div>
              <div>0</div>
              <span>前日</span>
            </div>
          </div>
        </div>
      </div>

      <div
        style="
          background-image: radial-gradient(#fff, #fff, #fff);
          position: fixed;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <div style="width: 100%; height: 100%">
          <iframe
            class="iframeStyle"
            src="/boardMap.html"
            ref="iframe"
            frameborder="0"
            id="iframetest"
            width="100%"
            height="100%"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      Monitor: [],
      letfTime: "",
      rightTime: "",
      show:true,
      mood: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普",
        },
      ],
      orderMoneyArray: [],
      wayBillArray: [],
    };
  },
  watch:{
    show(e){
      if(e){
        this.cread()
      }
    }
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById("chart"));
      let create_time = [];
      let num = [];
      this.wayBillArray.forEach((item, i) => {
        create_time.push(item.create_time);
        num.push(item.num);
      });
      const option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: create_time,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "运单数量",
            type: "bar",
            data: num,
          },
        ],
      };
      chart.setOption(option);
    },
    chartTwo() {
      var chartDom = document.getElementById("chartTwo");
      var myChart = echarts.init(chartDom);
      var option;
      let create_time = [];
      let num = [];
      this.orderMoneyArray.forEach((item, i) => {
        create_time.push(item.create_time);
        num.push(item.amount);
      });
      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: create_time,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: num,
            name: "订单金额",
            type: "line",
            areaStyle: {},
          },
        ],
      };

      option && myChart.setOption(option);
    },

    async cread() {
      let res = await this.$http.driverApi.getCorePlatformResult();
      this.mood = JSON.parse(JSON.stringify(res.data.data));
      this.mood.punctuality = this.mood.punctuality.toFixed(2);
      this.mood.cflowingWater = (this.mood.cflowingWater / 1000).toFixed(4);
      this.mood.dflowingWater = (this.mood.dflowingWater / 1000).toFixed(4);
      this.mood.zflowingWater = (this.mood.zflowingWater / 1000).toFixed(4);
      this.orderMoneyArray = this.mood.orderMoneyArray;
      this.wayBillArray = this.mood.wayBillArray;
      this.initChart();
      this.chartTwo();
      let data = JSON.parse(JSON.stringify(res.data.data.driverArray));
      let diver = [];
      data.forEach((item, i) => {
        if (item.lat && item.lng) {
          diver.push({
            driver_name: item.driverName,
            phone_number: item.phoneNumber,
            lat: item.lat,
            lng: item.lng,
          });
        }
      });
      setTimeout(() => {
        this.$refs.iframe.contentWindow.ToManualRoamFunc(diver);
      }, 1000);
    },
    async list() {
      let res = await this.$http.driverApi.getOrderMonitor();
      this.Monitor = res.data.data;
    },

    time() {
      // 创建一个Date对象
      var date = new Date();
      // 获取年、月、日
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      // 获取时、分、秒
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      // 获取星期几
      var week = date.getDay();
      // 根据星期几的值，获取星期几的字符串
      var weekStr = "";
      switch (week) {
        case 0:
          weekStr = "星期日";
          break;
        case 1:
          weekStr = "星期一";
          break;
        case 2:
          weekStr = "星期二";
          break;
        case 3:
          weekStr = "星期三";
          break;
        case 4:
          weekStr = "星期四";
          break;
        case 5:
          weekStr = "星期五";
          break;
        case 6:
          weekStr = "星期六";
          break;
      }
      // 拼接字符串
      this.letfTime = year + "年" + month + "月" + day + "日" + " " + weekStr;
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      this.rightTime = hour + ":" + minute + ":" + second;
    },
  },
  mounted() {
    this.cread();
    this.list();
    let that = this;
    setInterval(() => {
      that.list();
    }, 300000);
    setInterval(() => {
      that.time();
    }, 1000);
  },
};
</script>

<style scoped>
/deep/ .el-table .el-table__cell.gutter {
  opacity: 0;
}

/deep/ .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #183546;
}

/* 非斑马纹颜色 */
/deep/.el-table tr {
  background: #122b3a;
}

/* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
/deep/.el-table td,
.building-top .el-table th.is-leaf {
  border: none;
  color: white;
}

/* 这里是滑过斑马纹滑过时的颜色 */
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #183546;
}
</style>
<style lang="scss" scoped>
@media (min-width: 1800px) {
  .siji {
    display: flex;
    flex-wrap: wrap;
    padding-left: 100px;
  }
  .shuju_box {
    text-align: center;
    width: 125px;
    height: 103px;
    border-right: 1px solid #45565e;
  }

  .shuju_title {
    color: #69828d;
    font-size: 14px;
  }

  .shuju_number {
    font-size: 26px;
    font-weight: 600;
  }

  .car_ren {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
  }

  .car_number {
    font-size: 26px;
    color: #fff;
    font-weight: 600;
  }

  .car_title {
    font-size: 14px;
    color: #69828d;
    margin-left: 17px;
  }

  .car_box {
    display: flex;
    align-items: center;
    padding-top: 10px;
    width: 200px;
  }

  .car_line {
    width: 3px;
    height: 50px;
    background-color: #78dffa;
    border-radius: 8px;
  }

  .benyue_textfive span {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
  }

  .benyue_textfive {
    font-size: 26px;
    color: #fff;
    font-weight: 600;
  }

  .benyue_texthree {
    font-size: 14px;
    color: #69828d;
  }

  .benyue_texttwo {
    width: 6px;
    height: 6px;
    background-color: #78dffa;
    margin-right: 8px;
  }

  .benyue_textone {
    display: flex;
    align-items: center;
  }

  .benyue_textzero {
    width: 250px;
    display: flex;
    justify-content: space-between;
  }

  .benyue {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .liushui {
    font-size: 14px;
    color: #a6a6a6;
    text-align: center;
  }

  .benyue_text {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
  }

  .benyue_img {
    width: 150px;
    height: 150px;
    background: url("../../../public/yuanquan.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
  }

  .alarm_top1 span {
    line-height: 80px;
    color: #1b313a;
    font-size: 14px;
    font-weight: 600;
  }

  .alarm_top1 div {
    width: 43px;
    height: 54px;
    background-image: linear-gradient(
        to top,
        rgba(1, 48, 72, 0.397),
        rgba(1, 48, 72, 0.397)
      ),
      url("../../../public/number.png");
    background-size: 100% 100%;
    text-align: center;
    line-height: 54px;
    font-weight: 600;
    color: #fff;
    font-size: 30px;
  }

  .alarm_top1 {
    width: 200px;
    height: 44px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .alarm_top {
    width: 200px;
    height: 44px;
    background-image: linear-gradient(90deg, #163447 20%, rgba(22, 52, 71, 0.918) 120%);
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .alarm_top img {
    width: 21px;
    height: 23px;
    margin-left: 17px;
    margin-right: 7px;
  }

  .alarm_boxtopflx {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .alarm_box {
    width: 663px;
    z-index: 999;
    position: fixed;
    bottom: 10%;
    left: 31.5%;
  }

  .six_box1 {
    position: fixed;
    z-index: 999;
    top: 60%;
    right: 5%;
  }

  .dire_box1 {
    position: fixed;
    z-index: 999;
    top: 34%;
    right: 5%;
  }

  .gai_box1 {
    position: fixed;
    z-index: 999;
    top: 8%;
    right: 5%;
  }

  .six_box {
    position: fixed;
    z-index: 999;
    top: 60%;
    left: 3%;
  }

  .dire_box {
    position: fixed;
    z-index: 999;
    top: 34%;
    left: 3%;
  }

  .gai_box {
    position: fixed;
    z-index: 999;
    top: 8%;
    left: 3%;
  }

  .gai_flx {
    width: 506px;
    height: 172px;
    margin-top: 10px;
    background-image: linear-gradient(180deg, #163447 20%, #163447ef 120%);
    border-radius: 8px;
  }
.gai_flx1{
  width: 506px;
    height: 290px;
    margin-top: 10px;
    background-image: linear-gradient(180deg, #163447 20%, #163447ef 120%);
    border-radius: 8px;
}
  .gai_top {
    width: 502px;
    height: 58px;
    text-align: center;
    line-height: 58px;
    font-weight: 600;
    font-size: 22px;
    color: #fff;
    background: url("../../../public/beiji.png");
    background-size: 100% 100%;
  }

  .top_box {
    position: relative;
    z-index: 9999;
  }

  .top_img {
    position: absolute;
  }

  .top_text {
    position: absolute;
    top: 5%;
    left: 10%;
    margin-top: 10px;
    font-size: 18px;
    color: #088dd8;
    font-weight: 600;
  }

  .top_text1 {
    position: absolute;
    top: 5%;
    right: 13%;
    margin-top: 10px;
    font-size: 20px;
    color: #f9fbfc;
    font-weight: 600;
  }

  .orderJianBox {
    overflow: hidden;
    width: 506px;
    height: 172px;
    border-radius: 8px;
  }
  .orderJian {
    width: 536px !important;
  }
}
@media (max-width: 1800px) {
  .siji {
    display: flex;
    flex-wrap: wrap;
    padding-left: 1.25rem;
  }
  .shuju_box {
    text-align: center;
    width: 1.5625rem;
    height: 1.2815rem;
    border-right: 1px solid #45565e;
  }

  .shuju_title {
    color: #69828d;
    font-size: 0.175rem;
  }

  .shuju_number {
    font-size: 0.325rem;
    font-weight: 600;
  }

  .car_ren {
    font-size: 0.175rem;
    color: #fff;
    font-weight: 600;
  }

  .car_number {
    font-size: 0.325rem;
    color: #fff;
    font-weight: 600;
  }

  .car_title {
    font-size: 0.175rem;
    color: #69828d;
    margin-left: 0.2125rem;
  }

  .car_box {
    display: flex;
    align-items: center;
    padding-top: 0.125rem;
    width: 2.5rem;
  }

  .car_line {
    width: 0.0375rem;
    height: 0.625rem;
    background-color: #78dffa;
    border-radius: 0.1rem;
  }

  .benyue_textfive span {
    font-size: 0.175rem;
    font-weight: 600;
    color: #fff;
  }

  .benyue_textfive {
    font-size: 0.325rem;
    color: #fff;
    font-weight: 600;
  }

  .benyue_texthree {
    font-size: 0.175rem;
    color: #69828d;
  }

  .benyue_texttwo {
    width: 0.075rem;
    height: 0.075rem;
    background-color: #78dffa;
    margin-right: 0.1rem;
  }

  .benyue_textone {
    display: flex;
    align-items: center;
  }

  .benyue_textzero {
    width: 3.125rem;
    display: flex;
    justify-content: space-between;
  }

  .benyue {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .liushui {
    font-size: 0.175rem;
    color: #a6a6a6;
    text-align: center;
  }

  .benyue_text {
    font-size: 0.325rem;
    font-weight: 600;
    color: #fff;
  }

  .benyue_img {
    width: 1.875rem;
    height: 1.875rem;
    background: url("../../../public/yuanquan.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
  }

  .alarm_top1 span {
    line-height: 1rem;
    color: #1b313a;
    font-size: 0.175rem;
    font-weight: 600;
  }

  .alarm_top1 div {
    width: 0.5375rem;
    height: 0.675rem;
    background-image: linear-gradient(
        to top,
        rgba(1, 48, 72, 0.397),
        rgba(1, 48, 72, 0.397)
      ),
      url("../../../public/number.png");
    background-size: 100% 100%;
    text-align: center;
    line-height: 0.675rem;
    font-weight: 600;
    color: #fff;
    font-size: 0.375rem;
  }

  .alarm_top1 {
    width: 2.5rem;
    height: 0.55rem;
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
  }

  .alarm_top {
    width: 2.5rem;
    height: 0.55rem;
    background-image: linear-gradient(90deg, #163447 20%, rgba(22, 52, 71, 0.918) 120%);
    font-size: 0.225rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .alarm_top img {
    width: 0.2625rem;
    height: 0.2875rem;
    margin-left: 0.2125rem;
    margin-right: 0.0875rem;
  }

  .alarm_boxtopflx {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .alarm_box {
    width: 8.2875rem;
    z-index: 999;
    position: fixed;
    bottom: 10%;
    left: 34.5%;
  }

  .six_box1 {
    position: fixed;
    z-index: 999;
    top: 60%;
    right: 5%;
  }

  .dire_box1 {
    position: fixed;
    z-index: 999;
    top: 34%;
    right: 5%;
  }

  .gai_box1 {
    position: fixed;
    z-index: 999;
    top: 8%;
    right: 5%;
  }

  .six_box {
    position: fixed;
    z-index: 999;
    top: 60%;
    left: 3%;
  }

  .dire_box {
    position: fixed;
    z-index: 999;
    top: 34%;
    left: 3%;
  }

  .gai_box {
    position: fixed;
    z-index: 999;
    top: 8%;
    left: 3%;
  }

  .gai_flx {
    width:7.325rem;
    height: 2.75rem;
    margin-top: 0.125rem;
    background-image: linear-gradient(180deg, #163447 20%, #163447ef 120%);
    border-radius: 0.1rem;
  }

  .gai_flx1{
    width:7.325rem;
    height: 250px;
    margin-top: 0.125rem;
    background-image: linear-gradient(180deg, #163447 20%, #163447ef 120%);
    border-radius: 0.1rem;
}
  .gai_top {
    width: 7.275rem;
    height: 0.725rem;
    text-align: center;
    line-height: 0.725rem;
    font-weight: 600;
    font-size: 0.275rem;
    color: #fff;
    background: url("../../../public/beiji.png");
    background-size: 100% 100%;
  }

  .top_box {
    position: relative;
    z-index: 9999;
  }

  .top_img {
    position: absolute;
  }

  .top_text {
    position: absolute;
    top: 5%;
    left: 10%;
    margin-top: 0.125rem;
    font-size: 0.225rem;
    color: #088dd8;
    font-weight: 600;
  }

  .top_text1 {
    position: absolute;
    top: 5%;
    right: 13%;
    margin-top: 0.125rem;
    font-size: 0.25rem;
    color: #f9fbfc;
    font-weight: 600;
  }

  .orderJianBox {
    overflow: hidden;
    width: 7.325rem;
    height: 2.75rem;
    border-radius: 0.1rem;
  }
  .orderJian {
    width: 7.7rem !important;
  }
}
@media (max-width: 1400px) {
  .siji {
    display: flex;
    flex-wrap: wrap;
    padding-left: 1.25rem;
  }
  .shuju_box {
    text-align: center;
    width: 1.5625rem;
    height: 1.2815rem;
    border-right: 1px solid #45565e;
  }

  .shuju_title {
    color: #69828d;
    font-size: 0.175rem;
  }

  .shuju_number {
    font-size: 0.325rem;
    font-weight: 600;
  }

  .car_ren {
    font-size: 0.175rem;
    color: #fff;
    font-weight: 600;
  }

  .car_number {
    font-size: 0.325rem;
    color: #fff;
    font-weight: 600;
  }

  .car_title {
    font-size: 0.175rem;
    color: #69828d;
    margin-left: 0.2125rem;
  }

  .car_box {
    display: flex;
    align-items: center;
    padding-top: 0.125rem;
    width: 2.5rem;
  }

  .car_line {
    width: 0.0375rem;
    height: 0.625rem;
    background-color: #78dffa;
    border-radius: 0.1rem;
  }

  .benyue_textfive span {
    font-size: 0.175rem;
    font-weight: 600;
    color: #fff;
  }

  .benyue_textfive {
    font-size: 0.325rem;
    color: #fff;
    font-weight: 600;
  }

  .benyue_texthree {
    font-size: 0.175rem;
    color: #69828d;
  }

  .benyue_texttwo {
    width: 0.075rem;
    height: 0.075rem;
    background-color: #78dffa;
    margin-right: 0.1rem;
  }

  .benyue_textone {
    display: flex;
    align-items: center;
  }

  .benyue_textzero {
    width: 3.125rem;
    display: flex;
    justify-content: space-between;
  }

  .benyue {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .liushui {
    font-size: 0.175rem;
    color: #a6a6a6;
    text-align: center;
  }

  .benyue_text {
    font-size: 0.325rem;
    font-weight: 600;
    color: #fff;
  }

  .benyue_img {
    width: 1.875rem;
    height: 1.875rem;
    background: url("../../../public/yuanquan.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
  }

  .alarm_top1 span {
    line-height: 1rem;
    color: #1b313a;
    font-size: 0.175rem;
    font-weight: 600;
  }

  .alarm_top1 div {
    width: 0.5375rem;
    height: 0.675rem;
    background-image: linear-gradient(
        to top,
        rgba(1, 48, 72, 0.397),
        rgba(1, 48, 72, 0.397)
      ),
      url("../../../public/number.png");
    background-size: 100% 100%;
    text-align: center;
    line-height: 0.675rem;
    font-weight: 600;
    color: #fff;
    font-size: 0.375rem;
  }

  .alarm_top1 {
    width: 2.5rem;
    height: 0.55rem;
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
  }

  .alarm_top {
    width: 2.1rem;
    height: 0.55rem;
    background-image: linear-gradient(90deg, #163447 20%, rgba(22, 52, 71, 0.918) 120%);
    font-size: 0.225rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .alarm_top img {
    width: 0.2625rem;
    height: 0.2875rem;
    margin-left: 0.2125rem;
    margin-right: 0.0875rem;
  }

  .alarm_boxtopflx {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
@media (max-width: 1235px) {
  .alarm_box {
    width: 7.3rem;
    z-index: 999;
    position: fixed;
    bottom: 10%;
    margin-left: -2%;
  }
}
@media (min-width: 1235px) {
  .alarm_box {
    width: 7.3rem;
    z-index: 999;
    position: fixed;
    bottom: 10%;
    margin-left: -2%;
  }
  
}
@media (min-width: 1300px) {
  .alarm_box {
    width: 7.3rem;
    z-index: 999;
    position: fixed;
    bottom: 10%;

  }
  
}

  .six_box1 {
    position: fixed;
    z-index: 999;
    top: 60%;
    right: 3%;
  }

  .dire_box1 {
    position: fixed;
    z-index: 999;
    top: 34%;
    right: 3%;
  }

  .gai_box1 {
    position: fixed;
    z-index: 999;
    top: 8%;
    right: 3%;
  }

  .six_box {
    position: fixed;
    z-index: 999;
    top: 60%;
    left: 3%;
  }

  .dire_box {
    position: fixed;
    z-index: 999;
    top: 34%;
    left: 3%;
  }

  .gai_box {
    position: fixed;
    z-index: 999;
    top: 8%;
    left: 3%;
  }

  .gai_flx {
    width:6.325rem;
    height: 2rem;
    margin-top: 0.125rem;
    background-image: linear-gradient(180deg, #163447 20%, #163447ef 120%);
    border-radius: 0.1rem;
  }
  .gai_flx1{
    width:6.325rem;
    height: 200px;
    margin-top: 0.125rem;
    background-image: linear-gradient(180deg, #163447 20%, #163447ef 120%);
    border-radius: 0.1rem;
}
  .gai_top {
    width: 6.275rem;
    height: 0.725rem;
    text-align: center;
    line-height: 0.725rem;
    font-weight: 600;
    font-size: 0.275rem;
    color: #fff;
    background: url("../../../public/beiji.png");
    background-size: 100% 100%;
  }

  .top_box {
    position: relative;
    z-index: 9999;
  }

  .top_img {
    position: absolute;
  }

  .top_text {
    position: absolute;
    top: 5%;
    left: 10%;
    margin-top: 0.125rem;
    font-size: 0.225rem;
    color: #088dd8;
    font-weight: 600;
  }

  .top_text1 {
    position: absolute;
    top: 5%;
    right: 13%;
    margin-top: 0.125rem;
    font-size: 0.25rem;
    color: #f9fbfc;
    font-weight: 600;
  }

  .orderJianBox {
    overflow: hidden;
    width: 6.325rem;
    height: 2rem;
    border-radius: 0.1rem;
  }
  .orderJian {
    width: 6.7rem !important;
  }
}
</style>